<template>
    <wing-blank class="secondary-category">
        <div class="secondary-category-name">{{category.name}}</div>
        <lazy-component>
            <van-grid :border="false" :column-num="3" :gutter="4">
                <van-grid-item v-for="thirdCategory in category.children" :key="thirdCategory.id"
                               @click="handleRouteToProductsSearch(thirdCategory)">
                    <template #default>
                        <van-image height="60px" width="60px" :src="thirdCategory.imageUrl" lazy-load/>
                        <div class="third-category-name">{{thirdCategory.name}}</div>
                    </template>
                </van-grid-item>
            </van-grid>
        </lazy-component>
    </wing-blank>
</template>

<script>
  import * as _ from "lodash"
  import { catalog } from "@mall/api-services"
  import WingBlank from "@/components/WingBlank"
  import { Grid, GridItem, Image } from "vant"

  export default {
    name: "SecondaryCategory",
    components: {
      WingBlank,
      [Grid.name]: Grid,
      [GridItem.name]: GridItem,
      [Image.name]: Image,
    },
    props: {
      category: catalog.Category,
    },
    methods: {
      handleRouteToProductsSearch(category) {
        const { name, searchKeywords } = category
        if (_.isEmpty(searchKeywords)) {
          this.$router.push({
            path: "/products",
            query: {
              name: _.isEmpty(searchKeywords) ? name : _.join(searchKeywords, " "),
            },
          })
        }
      },
    },
  }
</script>

<style scoped>
    .secondary-category {

    }

    .secondary-category .secondary-category-name {
        margin-top: 9px;
        font-size: 12px;
    }

    .secondary-category .third-category-name {
        margin-top: 9px;
        font-size: 12px;
    }

    .secondary-category >>> .van-grid-item__content {
        padding: 8px;
    }
</style>
